<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Unicorn Admin</title>
		<meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/bootstrap-min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/uniform.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/select2.css" />		
		<link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/unicorn.main.css" />
		<link href="${pageContext.request.contextPath}/dist/css/dashboard.css" rel="stylesheet">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/unicorn.grey.css" class="skin-color" />	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
	<body>		
		<div id="header">
			<h1><a href="./dashboard.html">独角兽管理员</a></h1>		
		</div>	
			<div id="user-nav" class="navbar navbar-inverse">
            <ul class="nav btn-group">
                              
					<li><img src="${pageContext.request.contextPath}/dist/img/0.jpg"
					     style="border-radius:50%;width:30px;height:30px;margin-top:0px;"/></li>
					
					<!-- 自定义头像 -->
					<li><img src="${pageContext.request.contextPath}/DownloadFileServlet?fileName=${sessionScope.users.adminImg}"
					     style="border-radius:50%;width:30px;height:30px;margin-top:0px;"/></li>
					
                <li><a href="#">${sessionScope.users.adminAccount }</a></li>
                <li class="btn btn-inverse"><a title="" href="${pageContext.request.contextPath}/EduControllerByGyx?op=addminExit"><i class="icon icon-share-alt"></i> <span class="text">退出</span></a></li>
            </ul>
        </div>
            
		<div id="sidebar">
			<a href="#" class="visible-phone"><i class="icon icon-home"></i> 首页</a>
			<ul>
				<li class="active"><a href="${pageContext.request.contextPath}/mvc/index.jsp"><i class="icon icon-home"></i> <span>首页</span></a></li>
				<li class="submenu">
					<a href="#"><i class="icon icon-th-list"></i> <span>管理员事项</span> <span class="label">2</span></a>
					<ul>
						<li><a href="${pageContext.request.contextPath}/mvc/form-validation.jsp">管理员列表</a></li>
						<li><a href="${pageContext.request.contextPath}/mvc/form-addadmin.jsp">添加管理员</a></li>
					</ul>
				</li>
				<li class="submenu">
					<a href="#"><i class="icon icon-th-list"></i> <span>详细数据表</span> <span class="label">2</span></a>
					<ul>
						<li><a href="${pageContext.request.contextPath}/mvc/userstable.jsp">用户列表</a></li>
						<li><a href="${pageContext.request.contextPath}/mvc/articletable.jsp">文章列表</a></li>
					</ul>
				</li>
				<li>
					<a href="${pageContext.request.contextPath}/mvc/charts.jsp"><i class="icon icon-signal"></i> <span>数据信息统计</span></a>
				</li>		
			</ul>
		</div>
		
		<div id="style-switcher">
			<i class="icon-arrow-left icon-white"></i>
			<span>Style:</span>
			<a href="#grey" style="background-color: #555555;border-color: #aaaaaa;"></a>
			<a href="#blue" style="background-color: #2D2F57;"></a>
			<a href="#red" style="background-color: #673232;"></a>
		</div>
		
		<div id="content">
			<div id="content-header">
				<h1>文章详情</h1>
				<!-- <div class="btn-group">
					<a class="btn btn-large tip-bottom" title="Manage Files"><i class="icon-file"></i></a>
					<a class="btn btn-large tip-bottom" title="Manage Users"><i class="icon-user"></i></a>
					<a class="btn btn-large tip-bottom" title="Manage Comments"><i class="icon-comment"></i><span class="label label-important">5</span></a>
					<a class="btn btn-large tip-bottom" title="Manage Orders"><i class="icon-shopping-cart"></i></a>
				</div> -->
			</div>
			<div id="breadcrumb">
				<a href="index.jsp" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> 主页面</a>
				<a href="#" class="current">文章列表</a>
			</div>
			<div class="container-fluid">
				<div class="row-fluid">
					<div class="span12">	
						 <div class="widget-box"> 
							<div class="widget-title">
								<h5>全部文章</h5>
							</div>
							<div class="widget-title">
								<input type="text" id="queryKey" placeholder="搜索文章..." value="${requestScope.titleLike== null?'':requestScope.titleLike}"/>
								<input type="button"  id="querybtn"  value="查标题"/>
							</div>
							<div class="widget-content nopadding">
							<table class="table table-bordered table-striped">
									<thead>
									<tr>
									<th>文章序号</th>
									<th>文章标题</th>
									<th>文章作者</th>
									<th>上传时间</th>
									<th>文章状态</th>
									<th>文章类型</th>									
									<th>操作</th>
									</tr>
									</thead>
									<tbody id="allart">
									
									</tbody>
									</table>  
							</div>
							<!-- 分页模块 --><!-- col-md-12  --><!-- class="pagination" -->
							<div class="pagination Alternate" id="gotoPageDiv">			
					          <ul id="pageinfo" >
					
					          </ul>				          
					        </div>
					   </div>
					</div>
				</div>
				<div class="row-fluid">
					<div id="footer" class="span12">
						2012 &copy; Unicorn Admin. Brought to you by <a href="https://wrapbootstrap.com/user/diablo9983">diablo9983</a>
					</div>
				</div>
			</div>
		</div>
		
		
            
            <script src="${pageContext.request.contextPath}/dist/js/jquery.min.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/jquery.ui.custom.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/bootstrap-min.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/jquery.uniform.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/select2.min.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/jquery.dataTables.min.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/unicorn.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/unicorn.tables.js"></script>
            <!-- 以下为模态框 -->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
		aria-labelledby="exampleModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="exampleModalLabel">文章详情</h4>
				</div>
				<div class="modal-body">
					<form 
						method="post">
						<div class="form-group">
							<label for="artiid" class="control-label">文章序号:</label> <input
								type="text" class="form-control" id="artiid" name="artiid"
								readonly="readonly">
						</div>
						<div class="form-group">
							<label for="artititle" class="control-label">文章名:</label> <input
								type="text" class="form-control" id="artititle" name="artititle"
								readonly="readonly">
						</div>
						<div class="form-group">
							<label for="articoutent" class="control-label">文章内容:</label>
							<textarea class="form-control" id="articoutent"
								name="articoutent" required="required" rows="5" cols="100"></textarea>
						</div>
						<div class="form-group">
							<label for="artiauthor" class="control-label">文章音频:</label> <input
								type="text" class="form-control" id="articleVoice"
								name="articleVoice" required="required">
						</div>
						<div class="modal-footer">
							<input type="button" class="btn btn-default"
								data-dismiss="modal" value="关闭">
						</div>
					</form>
				</div>

			</div>
		</div>
	</div>
	</body>
	 <script>
	 $(function(){
		 //页面加载完显示文章数据,发起ajax请求
		$.get("${pageContext.request.contextPath}/EduControllerByLu",{op:"getAllArticle"},function(data){
			showAtricls(data);
		},"json"); 
		 //首页跳转
		$(document).on("click",".firstpage",function() {
			pageChange(1,"getAllArticle");
		});
		//尾巴跳转
		$(document).on("click",".endpage",function() {
				pageChange($("#totalpage").text()*1,"getAllArticle");
		});
		//模糊查询
		$(document).on("click","#querybtn",function() {
			pageChange(1,"getAllArticle");
		}); 
		//下一页跳转
		$(document).on("click",".nextpage",function() {
			pageChange(($("#pageno").text()*1)+1,"getAllArticle");
		}); 
		//每一页跳转
		$(document).on("click",".changepage",function() {
			//这里this代表被点击的数字
			pageChange($(this).text()*1,"getAllArticle");
		}); 
		//数字跳转
		$(document).on("click",".gotopage",function() {
			//这里this代表被点击的数字
			var num=$(".gotoid").val();
			var totalpage=$("#totalpage").text();
			if(num<1){
				num=1;
				$(".gotoid").val(1);
			}else if(num>totalpage*1){//弱类型,字符串*1直接转数字
				num=totalpage*1;
				$(".gotoid").val(totalpage*1);
			}
			pageChange(num,"getAllArticle");
		}); 
	 })
	 
	 //转递详情a标签对应的article的值给模态框
	 function getvaluefun(obj) {
		/* 获取A标签中的值 */
		var articleid1 = $(obj).data("articleid");
		//显示在模态框指定位置
		$("#artiid").val(articleid1);
		$("#artititle").val($(obj).data("articletitle"));
		$("#articoutent").val($(obj).data("articlecoutent"));
		$("#artiauthor").val($(obj).data("articleVoice"));
	}
	 //做文章注销动作
	 function writeOutArticle(articleId,pageno){
		 $.get("${pageContext.request.contextPath}/EduControllerByLu",{op:"writeoutarticle",articleid:articleId,pageNo:pageno},function(data){
			 showAtricls(data);
		 },"json");
	 }
	 //做已注销文章的恢复
	 function writeinArticle(articleId,pageno){
		 $.get("${pageContext.request.contextPath}/EduControllerByLu",{op:"writeinarticle",articleid:articleId,pageNo:pageno},function(data){
			 showAtricls(data);
		 },"json");
	 }
      //分页的方法
	 function pageChange(pageno,doOp){
			$.get("${pageContext.request.contextPath}/EduControllerByLu",{op:doOp,pageNo:pageno,pageSize:8,titleKey:$("#queryKey").val()},function(data){
				showAtricls(data);
			},"json");
		}
	 //显示刷新文章内容
	 function showAtricls(data){
			$("#allart").empty();
			$.each(data.data,function(n,article){
				var status="";
				var buttons='';
				var aa=article.articleContent;
				aa = aa.replace(/(\n)/g, "");    
				aa = aa.replace(/(\t)/g, "");    
				aa = aa.replace(/(\r)/g, "");    
				aa = aa.replace(/<\/?[^>]*>/g, "");    
				aa = aa.replace(/\s*/g, "");  	
				if(article.articleStatus == 1){
					status="启用";
					buttons='<a href=\"javascript:writeOutArticle('+article.articleId+','+data.pageNo+')\" ><button class=\"btn btn-danger btn-primary btn-xs\">注销</button></a>';
				}else{
					status="已注销"
					buttons='<a href=\"javascript:writeinArticle('+article.articleId+','+data.pageNo+')\" ><button class=\"btn btn-info btn-primary btn-xs\">恢复</button></a>';
				}
				$("#allart").append("<tr class=\"gradeX\">\r\n" + 
						"									<td>"+article.articleId+"</td>\r\n" + 
						"									<td>"+article.articleTitle+"</td>\r\n" + 
						"									<td>"+article.users.userAccount+"</td>\r\n" + 
						"									<td>"+article.articleDate.substring(0,article.articleDate.length - 2)+"</td>\r\n" + 
						"									<td>"+status+"</td>\r\n" + 
						"									<td>"+article.types.typeContent+"</td>								\r\n" + 
						"									<td class=\"center\"><a href=\"#\" data-toggle=\"modal\" data-target=\"#exampleModal\"\r\n" + 
						"									data-articleid=\""+article.articleId+"\"\r\n" + 
						"									data-articletitle=\""+article.articleTitle+"\"\r\n" + 
						"									data-articlecoutent=\""+aa+"\"\r\n" + 
						"									data-articleVoice=\""+article.articleVoice+"\"\r\n" + 
						"									onclick=\"getvaluefun (this)\"> \r\n" + 
						"										<button class=\"btn btn-success btn-primary  btn-xs\">详情</button></a> "+buttons+"</td>\r\n" + 
						"									</tr>");
				
			})
			 $("#allart").append("<tr><td  colspan=7>当前第<span id='pageno'>"+data.pageNo+"</span>页/共<span id='totalpage'>"+data.totalPage+"</span>页/每页显示<span id='pagesize'>"+data.pageSize+"</span>条/共<span id='totalcount'>"+data.totalCount+"</span>条数据</td></tr>");
	        //增加分页
			 $("#pageinfo").empty();
			if(1==data.pageNo){
				$("#pageinfo").append(' <li class="active"><a href="#">首页 </a></li>');
			}else{
				$("#pageinfo").append(' <li class=""><a href="#" class="firstpage">首页</a></li>');
			}
			for(var i=1;i<=data.totalPage;i++){
				 if(i==data.pageNo){
						$("#pageinfo").append(' <li class="active"><a href="#">'+i+' </a></li>');
					}else{
						$("#pageinfo").append(' <li class=""><a href="#" class="changepage">'+i+' </a></li>');
					}
			 }
			 if(data.totalPage==data.pageNo){
					$("#pageinfo").append(' <li class="active"><a href="#">下一页 </a></li>');
				}else{
					$("#pageinfo").append(' <li class=""><a href="#" class="nextpage" >下一页</a></li>');
				}
			 if(data.totalPage==data.pageNo){
					$("#pageinfo").append(' <li class="active"><a href="#" >尾页</a></li>');
				}else{
					$("#pageinfo").append(' <li class=""><a href="#" class="endpage" >尾页</a></li>');
				}
			 $("#pageinfo").append(' <li class="gotonumber"  style="height:10px"><a href="#"><input type="number" class="gotoid" min="1" max="'+data.totalPage+'" style="height:15px"></a></li>');
			 $("#pageinfo").append(' <li class="" ><a href="#" class="gotopage" >跳转</a></li>'); 
			
	 }
	 </script>
	 <style>
	 #gotoPageDiv{
	  height:30px;
	 }
	 #pageinfo a{
	 height:24px;
	 text-align: center;
	 }
	  #allart td{	
	 text-align: center;	
	 }
	 </style>
</html>
